<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最大的ikun门户网站</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/login.css">
	<link rel="stylesheet" href="./css/other.css">
	<script src="./js/jquery.min.js"></script>
	<script src="./js/vue.js"></script>
	<script src="./js/axios-0.18.0.js"></script>
</head>
<body>

	<div class="xtx-login-header">
		<!-- 登录头部 -->
		<!-- <h1 class="logo"></h1> -->
		<!-- <a class="home" href="./index.html">开启ikun之旅</a> -->
		<div class="nav">巅 峰 产 生 虚 伪 的 拥 护， 黄 昏 见 证 真 实 的 信 徒</div>
		<div class="basketball-icon"></div>
		<a class="home" href="./index.html">点击开启ikun之旅~</a>
	</div>
	<div class="xtx-login-main">
		<!-- 登录内容 -->
		<div class="wrapper">
			<!-- 开启autocomplete会记住之前输入的东西，不安全。可以关掉 -->
			<form action="" autocomplete="off">
				<div class="box">
					<div class="tab-nav">
						<a href="javascript:;" class="active" data-id="0">账户登录</a>
						<a href="javascript:;" data-id="1">二维码登录</a>
					</div>
					<div class="tab-pane">
						<div class="link">
							<a href="javascript:;">手机验证码登录</a>
						</div>
						<div class="input">
							<span class="iconfont icon-zhanghao"></span>
							<input required="" type="text" id="username" placeholder="请输入用户名称/手机号码" name="username">
						</div>
						<div class="input">
							<span class="iconfont icon-suo"></span>
							<!-- required代表只要是空的就不通过，是h5的新方法，不需要表单验证 -->
							<input required="" type="password" id="password" placeholder="请输入密码" name="password">
						</div>
						<div class="agree">
							<label for="my-checkbox">
								<!-- 此处input不加title会报错 -->
								<input type="checkbox" title="my-checkbox" value="1" id="my-checkbox" class="remember" name="agree">
								<span class="iconfont icon-xuanze"></span>
							</label>
							我已同意 <a href="javascript:;">《服务条款》</a> 和 <a>《隐私条款》</a>
						</div>
						<div class="button clearfix">
							<button type="submit" class="dl">登 录</button>
							<!-- <a class="dl" href="./center.html">登 录</a> -->
							<a class="fl" href="./forget.html">忘记密码？</a>
							<a class="fr" href="./register.html">免费注册</a>
						</div>
					</div>
					<div class="tab-pane" style="display: none;">
						<img class="code" src="./images/code.png" alt="">
					</div>
				</div>
			</form>
		</div>
	</div>
	<!-- 登录底部 -->
  <div class="xtx-login-footer">
    <!-- 版权信息 -->
    <div class="copyright">
      <p>
        <a href="javascript:;">关于我们</a>
        <a href="javascript:;">帮助中心</a>
        <!-- <a href="javascript:;">售后服务</a> -->
        <!-- <a href="javascript:;">配送与验收</a> -->
        <a href="javascript:;">商务合作</a>
        <a href="javascript:;">搜索推荐</a>
        <!-- <a href="javascript:;">友情链接</a> -->
      </p>
      <p>CopyRight &copy; 真ikun的家</p>
    </div>
  </div>
  <script>
    const tab_nav = document.querySelector('.tab-nav')

    // 事件冒泡
    tab_nav.addEventListener('click', function(e){
      if(e.target.tagName === 'A'){
        // 取消上一个active
        console.log(tab_nav.querySelector('.active'))
        console.log(e.target.dataset.id)
        tab_nav.querySelector('.active').classList.remove('active')
        if(e.target.dataset.id === '1'){  // 可以用数组循环
          tab_nav.nextElementSibling.style.display = 'none'
          tab_nav.nextElementSibling.nextElementSibling.style.display = 'block'
        }else{
          tab_nav.nextElementSibling.style.display = 'block'
          tab_nav.nextElementSibling.nextElementSibling.style.display = 'none'
        }

        // 当前元素添加active
        e.target.classList.add('active')
      }
    })
    // 点击提交模块，先将事务阻断
    const form = document.querySelector('form')
    const agree = document.querySelector('input[name=agree]')
    const userName = document.querySelector('input[name=username]')
    console.log(agree.id)
    console.log(agree.value)
    console.log(agree.title)
    console.log(agree.type)
    console.log(agree.class)  // undefined

    form.addEventListener('submit', function(e){
      e.preventDefault()
      if(!agree.checked){
        return alert('请勾选用户协议')  // 注意这里是return
      }
      // 将之前的用户信息清除
      localStorage.clear()
      // 这里添加一个判断，如果用户数据和数据库对不上的话（注意用户名可以是手机号，就终止，并提示错误

	});
	$(".dl").bind("click", function () {
		if(agree.checked){
			$.ajax({
				//向后台请求数据的方式
				type: 'get',
				//请求后台的地址可以简写
				url: "http://43.156.57.25:81/users/check",
				data: {
					// id: $("#id").val(),
					username: $("#username").val(),
					password: $("#password").val()
					// realname: $("#realname").val()
					// phone: $("#phone").val()
				},
				//成功调用后台方法后的回调函数
				success: function (response) {
					// console.log(response)
					if(response){
						localStorage.setItem('user', userName.value)
						location.href = './index.html'
					}else{
						console.log('登陆出错')
					}
				}
			});
		}


      // localStorage.setItem('user', userName.value)
      // location.href = './index.html'
    })

	// 添加篮球动画
	const basketballIcon = document.querySelector('.basketball-icon');
	basketballIcon.addEventListener('mouseenter', function() {
		basketballIcon.classList.add('jump');
	});
	basketballIcon.addEventListener('animationend', function() {
		basketballIcon.classList.remove('jump');
	});
  </script>
</body>
</html>